<template>
    <div style="margin-top: 50px">

        <!--用户标题-->
        <el-row style="margin-right: 150px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <span style="font-size: 25px">用户管理</span>
            </div></el-col>
        </el-row>

        <!--表格-->
        <el-row style="margin-top: 25px;margin-left: 50px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-table
                            :data="tableData"
                            width="100%"
                            height="70%"
                            highlight-current-row
                            @current-change="handleCurrentChange">
                        <el-table-column
                                property="username"
                                label="用户名"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                property="pwd"
                                label="密码"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                label="角色"
                                width="350">
                            <template slot-scope="scope">
                                <span v-for="role in scope.row.roleBeans" :key="role">{{role.name}}&nbsp;&nbsp;&nbsp;</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                property="real"
                                label="真实姓名"
                                width="150">
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

        <!--分页和查询还有按钮-->
        <el-row style="margin-top: 30px;margin-right: 400px">
            <el-col :span="14"><div class="grid-content bg-purple">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :current-page="current"
                        :total="total"
                        :page-size="pageSize"
                        @current-change="change">
                </el-pagination>
                <div style="margin-top: 100px">
                    <el-button type="success" @click="addShow">添加新用户</el-button>
                    <el-button type="success" @click="del">删除用户</el-button>
                    <el-button type="success" @click="updateShow">修改用户权限</el-button>
                </div>
            </div></el-col>

            <el-col :span="10"><div class="grid-content bg-purple-light">
                <el-card class="box-card">
                    <span>查询用户信息</span><br>
                    <el-form ref="form" :model="form" label-width="80px" style="margin-left: 50px;margin-right: 50px;margin-top: 10px">
                        <el-form-item label="用户名称">
                            <el-input v-model="username"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" @click="init">查询</el-button>
                </el-card>
            </div></el-col>
        </el-row>

        <!--添加用户弹框-->
        <el-dialog
                title="修改用户权限"
                :visible.sync="addUser"
                :before-close="handleClose"
                width="50%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
                <el-form-item label="用户名:">
                    <el-input v-model="uName" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名:">
                    <el-input v-model="rName" placeholder="请输入真实姓名"></el-input>
                </el-form-item>
                <el-form-item label="当前角色:">
                    <template>
                        <el-checkbox-group v-model="checkedCities">
                            <el-checkbox  v-for="role in roles" :label="role.id" :key="role.id" :title="role.name" @change="power">{{role.name}}</el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-form-item>
                <el-form-item label="拥有权限:">
                    <span v-for="a in array" :key="a">{{a}}&nbsp;&nbsp;</span>
                </el-form-item>
            </el-form>
            <el-button type="success" @click="add">添加</el-button>
        </el-dialog>

        <!--修改用户弹框-->
        <el-dialog
                title="修改用户权限"
                :visible.sync="userPower"
                :before-close="handleClose"
                width="30%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
                <el-form-item label="用户名:">
                    <span>{{name}}</span>
                </el-form-item>
                <el-form-item label="真实姓名:">
                    <span>{{realName}}</span>
                </el-form-item>
                <el-form-item label="当前角色:">
                    <template>
                        <el-checkbox-group v-model="checkedCities">
                            <el-checkbox  v-for="role in roles" :label="role.id" :key="role" @change="power">{{role.name}}</el-checkbox>
                        </el-checkbox-group>

                    </template>
                </el-form-item>
                <el-form-item label="拥有权限:">
                    <span v-for="a in array" :key="a">{{a}}&nbsp;&nbsp;</span>
                </el-form-item>
            </el-form>
            <el-button type="success" @click="updatePower">修改</el-button>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
            return{
                userPower:false,
                addUser:false,

                //用户表格数据
                tableData:"",
                userId:"",
                //分页参数
                current:1,
                pageSize:3,
                total:20,
                //动态查询参数
                username:"",

                //修改用户权限
                name:"",
                realName:"",
                roles:"",
                checkedCities:[],
                powers:"",
                array:"",

                //添加用户
                uName:"",
                rName:"",

            }
        },mounted() {
            this.init();
        },methods:{
            handleCurrentChange(val){
                this.userId = val.id;
            },
            init(){
                this.axios.get("jxc/user/findPageAndItem",{
                    params:{
                        current:this.current,
                        pageSize:this.pageSize,
                        username:this.username,
                    }
                }).then(
                    r => {
                        // console.log(JSON.stringify(r.data.records))
                        this.tableData = r.data.records;
                        this.total = r.data.total;
                    }
                )
            },
            change(current){
                this.current = current;
                this.init();
            },
            del(){
                let url = "jxc/user/del/"+this.userId;
                this.axios.delete(url).then(
                    r => {
                        if (r.data == "ok") {
                            this.$message({
                                message: '删除成功',
                                type: 'success',
                                duration: 1000
                            });
                        } else if (r.data == "no") {
                            this.$message({
                                message: '删除失败',
                                type: 'error',
                                duration: 1000
                            });
                        }
                    }
                );
                this.current = 1
                this.init();
            },
            updateShow:async function () {
                this.axios.get("jxc/role/findAll").then(
                    r => {
                        this.roles = r.data;
                    }
                );
                await this.axios.get("jxc/user/findById", {params: {id: this.userId}}).then(
                    r => {
                        this.name = r.data.username;
                        this.realName = r.data.real;
                        var array = new Array();
                        for (let i = 0; i < r.data.roleBeans.length; i++) {
                            array.push(r.data.roleBeans[i].id);
                        }
                        this.checkedCities = array;
                    }
                );
                this.power();
                this.userPower = true;
            },
            power:async function () {
                console.log("!11111")
                // console.log(this.checkedCities)
                let array = new Array();

                for (let i = 0; i < this.checkedCities.length; i++) {
                    await this.axios.get("jxc/role/findById", {params: {id: this.checkedCities[i]}}).then(
                        r => {
                            for (let j = 0; j < r.data.powerBeans.length; j++) {
                                array.push(r.data.powerBeans[j].name)
                            }
                        }
                    )
                }
                let arr = [];
                for (let i = 0; i < array.length; i++) {
                    if (arr.indexOf(array[i]) == -1) {
                        arr.push(array[i]);
                    }
                }
                console.log(arr)

                this.array = arr;
            },
            updatePower(){
                let formData = new FormData();
                formData.append("userId",this.userId);
                formData.append("roleIds",this.checkedCities);
                this.axios.put("jxc/user/update",formData).then(
                    r => {
                        if (r.data == "ok") {
                            this.$message({
                                message: '修改成功',
                                type: 'success',
                                duration: 1000
                            });
                        } else if (r.data == "no") {
                            this.$message({
                                message: '修改失败',
                                type: 'error',
                                duration: 1000
                            });
                        }
                        this.userPower = false;
                        this.init();
                    }
                )
            },
            //添加用户
            addShow(){
                //获取角色集合
                this.axios.get("jxc/role/findAll").then(
                    r => {
                        this.roles = r.data;
                    }
                );
                this.addUser = true;
            },
            add(){
                let formData = new FormData();
                formData.append("username",this.uName);
                formData.append("realName",this.rName);
                formData.append("roleIds",this.checkedCities);
                this.axios.post("jxc/user/add",formData).then(
                    r => {
                        if (r.data == "ok") {
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                                duration: 1000
                            });
                        } else if (r.data == "no") {
                            this.$message({
                                message: '添加失败',
                                type: 'error',
                                duration: 1000
                            });
                        }
                        this.uName = "";
                        this.realName = "";
                        this.checkedCities = [];
                        this.array = "";
                        this.addUser = false;
                        this.init();
                    }
                )
            },
            handleClose(){
                this.array = [];
                this.checkedCities = [];
                this.userPower = false;
                this.addUser = false;
            }


        }
    }
</script>

<style scoped>

</style>